<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="我爱我的家人" num="666666666"/><br/>
    <br/><br/>
----------------------------------------------------
      <TableList :arr="arr"/>
      <br/><br/>
----------------------------
<br><br> -->
    <div id="box">
        <div style="float:left; width:20%;height:100vh;border:1px solid blue;margin:0px 10px 0 10px">
  <el-row>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      >
      <el-submenu index="/">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span> home页面 </span>
        </template>
        <el-menu-item-group title="分组1">
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="/home/myone">表格1</el-menu-item>
          <el-menu-item index="/home/mytwo">表格2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="/home/tielu">铁路页面</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组3">
          <el-menu-item index="/home/about">about页面</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
        <el-menu-item index="/home/gouzi">
        <i class="el-icon-menu"></i>
        <span slot="title">生命周期钩子</span>
      </el-menu-item>
      <el-menu-item index="/home/flexye">
        <i class="el-icon-document"></i>
        <span slot="title">flex页面</span>
      </el-menu-item>
      <el-menu-item index="/home/lyb">
        <i class="el-icon-setting"></i>
        <span slot="title">留言板</span>
      </el-menu-item>
      <el-submenu index="1">
          <template slot="title">
                <i class="el-icon-data-line"></i>
                <span slot="title">Echarts</span>
          </template>
          <el-menu-item index="/home/echarts1">Tab1</el-menu-item>
          <el-menu-item index="/home/echarts2">Tab2</el-menu-item>
     </el-submenu>
      <el-submenu index="2">
          <template slot="title">
                <i class="el-icon-data-line"></i>
                <span slot="title">VUEX</span>
          </template>
          <el-menu-item index="/home/store">vuex1</el-menu-item>
     </el-submenu>
      <el-menu-item index="/home/lianxiang">
        <i class="el-icon-setting"></i>
        <span slot="title">页面联想</span>
      </el-menu-item>
  </el-menu>

</el-row>
        </div>
        <div style="float:left;width:80%;border:1px solid blue;">
          <router-view></router-view>
        </div>
    </div>



  </div>
</template>
<style scoped>
  #box{
    display: flex;
    display: -webkit-flex;
    width:90vw;
    border:1px solid red;
    margin: auto;
  
  }
  #box .el-menu{
    height: 100vh;
  }
</style>
<script>
// // @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
// import TableList from '../components/tables/TableList.vue'

 
export default {
  name: 'HomeView',
  data(){
    return{
      // tabPosition:'left',
      // a:1,
      // arr:[
      //    {
      //     user:'AA',
      //     sex:'男',
      //     age:'111',
      //     school:'二小'
      //   },
      //    {
      //     user:'BB',
      //     sex:'男',
      //     age:'222',
      //     school:'一中'
      //   },
      //    {
      //     user:'CC',
      //     sex:'女',
      //     age:'333',
      //     school:'一高'
      //   },
      // ]
    }
  },
  methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
  },
  components: {
    // HelloWorld,
    // TableList,

  }
}
</script>
